<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>备件管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-table :data="tableData"
                style="width: 100%"
                height="600"
                stripe>
        <div v-for="item in tempData.children"
             :key="item.id">
          <el-table-column :prop="item.name"
           header-align="center"
                            align="center"
                           :label="item.title"
                           width="200">
          </el-table-column>
        </div>
        <el-table-column prop="operation1"
         header-align="center"
                            align="center"
                         label="操作1"
                         width="180">
          <template slot-scope="scope">
            <el-button type="info"
                       @click="xiugai1(scope.row,scope.$index)">智能分类</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="operation2"
         header-align="center"
                            align="center"
                         label="操作2"
                         width="180">
          <template slot-scope="scope">
            <el-badge value="类别变化" :hidden= "scope.$index === isShowRed?false:true" max="10" >
                <el-button type="info" :disabled = "scope.$index === isShowRed?false:true"
                       @click="xiugai(scope.row)">库存策略
                       </el-button>
            </el-badge>

          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="请输入备件原始数据"
               :visible.sync="isShowS"
               width="30%"
               center
               :before-close="handleClose">
      <div class="dialogBox">
        <el-form :label-position="labelPosition"
                 label-width="100px"
                 :model="formLabelAlign">
          <el-form-item label="备件名称">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="年订货量金额">
            <el-input v-model="formLabelAlign.total_amount"></el-input>
          </el-form-item>
          <el-form-item label="订货提前期">
            <el-input v-model="formLabelAlign.forward_date"></el-input>
          </el-form-item>
          <el-form-item label="通用属性">
            <el-input v-model="formLabelAlign.general"></el-input>
          </el-form-item>
          <el-form-item label="需求变化系数">
            <el-input v-model="formLabelAlign.num"></el-input>
          </el-form-item>
          <el-form-item label="需求等级">
            <el-input v-model="formLabelAlign.pro_level"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="isShowS = false">取 消</el-button>
        <el-button type="primary"
                   @click="start">开始分类</el-button>
      </span>
    </el-dialog>
    <el-dialog title="变化结果"
               :visible.sync="isShowS1"
               width="30%"
               center
              >
      <div class="dialogResultBox">
         <div class="dialogBox">
            <div class="item">
              <span>备件类型：</span>
              <span>{{formLabelAlign2.product_num }}</span>
            </div>
            <div class="item">
              <span>订货量：</span>
              <span>{{formLabelAlign2.order_quantity }}件</span>
            </div>
            <div class="item">
              <span>安全库存：</span>
              <span>{{formLabelAlign2.safe_stock }}件</span>
            </div>
            <div class="item">
              <span>最大库存水平：</span>
              <span>{{formLabelAlign2.max_stock }}件</span>
            </div>
      </div>
      </div>
      <span slot="footer"
            class="dialog-footer">

        <el-button @click="isShowS1 = false">取 消</el-button>
        <el-button type="primary"
                   @click="isShowS1 = false">完成</el-button>
      </span>
    </el-dialog>
    <el-dialog title="等待加载中"
               :visible.sync="isShowS6"
               width="30%"
               center
              >
      <div class="el-icon-loading">

      </div>
      <span slot="footer"
            class="dialog-footer">
      </span>
    </el-dialog>
  </div>
</template>
<style lang="less" scoped>
.el-table {
  margin-top: 15px;
}
</style>
<script>
export default {
  data () {
    return {
      isShowRed: -1,
      tempShowRed: -1,
      loading: true,
      isShowS6: false,
      tableData: [],
      rootId: 0,
      childId: 0,
      isShowS: false,
      isShowS1: false,
      tempDialog: [],
      formLabelAlign: {
        name: '',
        total_amount: 0,
        forward_date: '',
        general: 0,
        pro_level: '',
        num: 0.0
      },
      formLabelAlign2: {},
      tempData: {
        children: [
          { id: 5, title: '需求等级', name: 'pro_level' },
          { id: 1, title: '顺序号', name: 'id' },
          { id: 8, title: '备件名称', name: 'product_name' },
          { id: 2, title: '库存金额（元）', name: 'total_amount' },
          { id: 3, title: '通用性', name: 'general' },
          { id: 4, title: '订货提前期', name: 'forward_date' }

        ]
      }
    }
  },
  methods: {
    xiugai1 (obj, index) {
      this.isShowS = true
      this.formLabelAlign.id = obj.id
      this.formLabelAlign.name = obj.product_name
      this.formLabelAlign.total_amount = obj.total_amount
      this.formLabelAlign.general = obj.general
      this.formLabelAlign.forward_date = obj.forward_date
      this.formLabelAlign.pro_level = obj.pro_level
      this.tempShowRed = index
      console.log(index)
      // eslint-disable-next-line no-unused-vars
      this.formLabelAlign.num = Math.random()
      if (obj.pro_level[1] === '1') this.formLabelAlign.num += 1
      else if (obj.pro_level[1] === '2') this.formLabelAlign.num = 10 * this.formLabelAlign.num
      this.formLabelAlign.num.toFixed(2)
      console.log('dd', obj)
    },
    start () {
      const tmpObj = {}
      this.isShowS = false
      tmpObj.id = this.formLabelAlign.id
      tmpObj.total_amount = this.formLabelAlign.total_amount
      tmpObj.general = this.formLabelAlign.general
      tmpObj.forward_date = this.formLabelAlign.forward_date
      const that = this
      that.$axios({
        method: 'post',
        url: that.$api + '/admin/update-level',
        data: {
          id: this.formLabelAlign.id,
          total_amount: this.formLabelAlign.total_amount,
          general: this.formLabelAlign.general,
          forward_date: this.formLabelAlign.forward_date
        }
      })
        .then(function (response) {
          console.log(response)
          const data = response.data
          console.log(data.level, that.formLabelAlign.pro_level)
          if (data.level !== that.formLabelAlign.pro_level) {
            console.log(that.isShowRed, that.tempShowRed)
            that.isShowS6 = true
            // eslint-disable-next-line no-implied-eval
            // eslint-disable-next-line block-spacing
            setTimeout(function () {that.isShowS6 = false}, 2000)
            that.isShowRed = that.tempShowRed
            that.formLabelAlign.pro_level = data.level
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    xiugai (obj) {
      const that = this
      this.isShowS1 = true
      // eslint-disable-next-line camelcase
      const temp_level = that.formLabelAlign.pro_level
      that.$axios({
        method: 'post',
        url: that.$api + '/admin/ctr-stock',
        data: {
          product_num: temp_level
        }
      })
        .then(function (response) {
          console.log(response)
          const data = response.data
          that.formLabelAlign2 = data.level
          obj.pro_level = data.level.product_num
          that.isShowRed = -1
          that.tempShowRed = -1
          that.$axios.get(this.$api + '/admin/get-prolevel-info', {
          }).then((res1) => {
            console.log('数据：', res1.data)
            that.tableData = res1.data.date
          }).catch(err => {
            console.log(err)
          })
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  },

  async mounted () {
    const that = this
    await this.$axios.get(this.$api + '/admin/get-prolevel-info', {
    }).then((res) => {
      console.log('数据：', res.data)
      that.tableData = res.data.date
    }).catch(err => {
      console.log(err)
    })
  }

}
</script>

<style lang="less" scoped>
  .el-badge{
    margin-top: 10px;
    margin-right: 10px;
    /deep/.el-badge__content.is-fixed{
      right:45px;
      top:15px;
    }
  }
  .el-icon-loading{
    font-size: 100px;
  }
  .dialogResultBox{
    .dialogBox {
  display: flex;
  flex-direction: column;
  align-content: center;
  .item {
    margin: 10px 20%;
    span {
      width: 6.25rem;
      margin-right: 40px;
    }
  }
}
  }

</style>
